388. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2021-05-13 09:09:20 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

388.1 Files compared

#LocationFileLast Modified
1/Applications/Ampps/www/Porto 3.2.2/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_Checkout/web/css/source/module/checkout_progress-bar.less2016-05-15 09:46:46 +0000
2/Applications/Ampps/www/Porto v4.0.0/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_Checkout/web/css/source/module/checkout_progress-bar.less2021-02-03 10:55:22 +0000

388.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged3360
Changed24
Inserted00
Removed00

388.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

388.4 Active regular expressions

No regular expressions were active.

388.5 Comparison detail

1 // /** 1 // /**
2 //  * Copyright © 2015 Magento. All rights reserved. 2 //  * Copyright © 2015 Magento. All rights reserved.
3 //  * See COPYING.txt for license details. 3 //  * See COPYING.txt for license details.
4 //  */ 4 //  */
5  5 
6 // 6 //
7 //  Variables 7 //  Variables
8 //  _____________________________________________ 8 //  _____________________________________________
9  9 
10 @checkout-progress-bar__font-size: 18px; 10 @checkout-progress-bar__font-size: 1rem;
11 @checkout-progress-bar__font-weight: @font-weight__light; 11 @checkout-progress-bar__font-weight: @font-weight__light;
12 @checkout-progress-bar__margin: @indent__base; 12 @checkout-progress-bar__margin: @indent__base;
13  13 
14 @checkout-progress-bar-item__background-color: @color-gray-middle1; 14 @checkout-progress-bar-item__background-color: @color-gray-middle1;
15 @checkout-progress-bar-item__border-radius: 6px; 15 @checkout-progress-bar-item__border-radius: 6px;
16 @checkout-progress-bar-item__color: @primary__color; 16 @checkout-progress-bar-item__color: @primary__color;
17 @checkout-progress-bar-item__margin: @indent__s; 17 @checkout-progress-bar-item__margin: @indent__s;
18 @checkout-progress-bar-item__transition: background .3s; 18 @checkout-progress-bar-item__transition: background .3s;
19 @checkout-progress-bar-item__width: 185px; 19 @checkout-progress-bar-item__width: 185px;
20  20 
21 @checkout-progress-bar-item__active__background-color: @color-orange-red1; 21 @checkout-progress-bar-item__active__background-color: @color-orange-red1;
22 @checkout-progress-bar-item__complete__color: @link__color; 22 @checkout-progress-bar-item__complete__color: @link__color;
23 @checkout-progress-bar-item__hover__background-color: darken(@checkout-progress-bar-item__background-color, 5%); 23 @checkout-progress-bar-item__hover__background-color: darken(@checkout-progress-bar-item__background-color, 5%);
24  24 
25 @checkout-progress-bar-item-element__height: @checkout-progress-bar-item-element__width; 25 @checkout-progress-bar-item-element__height: @checkout-progress-bar-item-element__width;
26 @checkout-progress-bar-item-element__width: 38px; 26 @checkout-progress-bar-item-element__width: 38px;
27  27 
28 @checkout-progress-bar-item-element-inner__background-color: @page__background-color; 28 @checkout-progress-bar-item-element-inner__background-color: @page__background-color;
29 @checkout-progress-bar-item-element-inner__color: @checkout-progress-bar-item__color; 29 @checkout-progress-bar-item-element-inner__color: @checkout-progress-bar-item__color;
30 @checkout-progress-bar-item-element-inner__height: @checkout-progress-bar-item-element-inner__width; 30 @checkout-progress-bar-item-element-inner__height: @checkout-progress-bar-item-element-inner__width;
31 @checkout-progress-bar-item-element-inner__width: @checkout-progress-bar-item-element__width - ( @checkout-progress-bar-item-element-outer-radius__width*2 ); 31 @checkout-progress-bar-item-element-inner__width: @checkout-progress-bar-item-element__width - ( @checkout-progress-bar-item-element-outer-radius__width*2 );
32 @checkout-progress-bar-item-element-inner__active__content: @icon-checkmark; 32 @checkout-progress-bar-item-element-inner__active__content: @icon-checkmark;
33  33 
34 @checkout-progress-bar-item-element-outer-radius__width: 6px; 34 @checkout-progress-bar-item-element-outer-radius__width: 6px;
35  35 
36 // 36 //
37 //  Common 37 //  Common
38 //  _____________________________________________ 38 //  _____________________________________________
39  39 
40 & when (@media-common = true) { 40 & when (@media-common = true) {
41  41 
42     // 42     //
43     //  Checkout Progress Bar 43     //  Checkout Progress Bar
44     //  --------------------------------------------- 44     //  ---------------------------------------------
45  45 
46     .opc-progress-bar { 46     .opc-progress-bar {
47         &:extend(.abs-reset-list all); 47         &:extend(.abs-reset-list all);
48         display: none; 48         display: none;
49     } 49     }
50 } 50 }
51  51 
52 // 52 //
53 //  Desktop 53 //  Desktop
54 //  _____________________________________________ 54 //  _____________________________________________
55  55 
56 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { 56 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
57  57 
58     .opc-progress-bar { 58     .opc-progress-bar {
59         .lib-css(margin, 0 0 @checkout-progress-bar__margin); 59         .lib-css(margin, @checkout-progress-bar__margin 0 @checkout-progress-bar__margin);
60         counter-reset: i; 60         counter-reset: i;
61         display: block; 61         display: block;
62         font-size: 0; 62         font-size: 0;
63     } 63     }
64  64 
65     .opc-progress-bar-item { 65     .opc-progress-bar-item {
66         .lib-css(margin, 0 0 @checkout-progress-bar-item__margin); 66         .lib-css(margin, 0 0 @checkout-progress-bar-item__margin);
67         .lib-css(width, @checkout-progress-bar-item__width); 67         .lib-css(width, @checkout-progress-bar-item__width);
68         display: inline-block; 68         display: inline-block;
69         position: relative; 69         position: relative;
70         text-align: center; 70         text-align: center;
71         vertical-align: top; 71         vertical-align: top;
72  72 
73         &:before { // Horizontal line 73         &:before { // Horizontal line
74             .lib-css(background, @checkout-progress-bar-item__background-color); 74             .lib-css(background, @checkout-progress-bar-item__background-color);
75             .lib-css(top, @checkout-progress-bar-item-element__width/2); 75             .lib-css(top, @checkout-progress-bar-item-element__width/2);
76             .lib-css(transition, @checkout-progress-bar-item__transition); 76             .lib-css(transition, @checkout-progress-bar-item__transition);
77             content: ''; 77             content: '';
78             height: 7px; 78             height: 7px;
79             left: 0; 79             left: 0;
80             position: absolute; 80             position: absolute;
81             width: 100%; 81             width: 100%;
82         } 82         }
83  83 
84         &:first-child { 84         &:first-child {
85             &:before { 85             &:before {
86                 .lib-css(border-radius, 0 @checkout-progress-bar-item__border-radius @checkout-progress-bar-item__border-radius 0); 86                 .lib-css(border-radius, 0 @checkout-progress-bar-item__border-radius @checkout-progress-bar-item__border-radius 0);
87             } 87             }
88         } 88         }
89  89 
90         &:last-child { 90         &:last-child {
91             &:before { 91             &:before {
92                 .lib-css(border-radius, @checkout-progress-bar-item__border-radius 0 0 @checkout-progress-bar-item__border-radius); 92                 .lib-css(border-radius, @checkout-progress-bar-item__border-radius 0 0 @checkout-progress-bar-item__border-radius);
93             } 93             }
94         } 94         }
95  95 
96         > span { 96         > span {
97             display: inline-block; 97             display: inline-block;
98             padding-top: 45px; 98             padding-top: 45px;
99             width: 100%; 99             width: 100%;
100             word-wrap: break-word; 100             word-wrap: break-word;
101  101 
102             .lib-typography( 102             .lib-typography(
103             @_color: @checkout-progress-bar-item__background-color, 103             @_color: @checkout-progress-bar-item__background-color,
104             @_font-family: false, 104             @_font-family: false,
105             @_font-size: @checkout-progress-bar__font-size, 105             @_font-size: @checkout-progress-bar__font-size,
106             @_font-style: false, 106             @_font-style: false,
107             @_font-weight: @checkout-progress-bar__font-weight, 107             @_font-weight: @checkout-progress-bar__font-weight,
108             @_line-height: false 108             @_line-height: false
109             ); 109             );
110  110 
111             &:before, // Item element 111             &:before, // Item element
112             &:after { 112             &:after {
113                 .lib-css(background, @checkout-progress-bar-item__background-color); 113                 .lib-css(background, @checkout-progress-bar-item__background-color);
114                 .lib-css(height, @checkout-progress-bar-item-element__height); 114                 .lib-css(height, @checkout-progress-bar-item-element__height);
115                 .lib-css(margin-right, -(@checkout-progress-bar-item-element__width/2)); 115                 .lib-css(margin-right, -(@checkout-progress-bar-item-element__width/2));
116                 .lib-css(transition, @checkout-progress-bar-item__transition); 116                 .lib-css(transition, @checkout-progress-bar-item__transition);
117                 .lib-css(width, @checkout-progress-bar-item-element__width); 117                 .lib-css(width, @checkout-progress-bar-item-element__width);
118                 border-radius: 50%; 118                 border-radius: 50%;
119                 content: ''; 119                 content: '';
120                 right: 50%; 120                 right: 50%;
121                 position: absolute; 121                 position: absolute;
122                 top: 0; 122                 top: 0;
123             } 123             }
124  124 
125             &:after { // Item element inner 125             &:after { // Item element inner
126                 .lib-css(background, @checkout-progress-bar-item-element-inner__background-color); 126                 .lib-css(background, @checkout-progress-bar-item-element-inner__background-color);
127                 .lib-css(height, @checkout-progress-bar-item-element-inner__height); 127                 .lib-css(height, @checkout-progress-bar-item-element-inner__height);
128                 .lib-css(margin-right, -(@checkout-progress-bar-item-element-inner__width/2)); 128                 .lib-css(margin-right, -(@checkout-progress-bar-item-element-inner__width/2));
129                 .lib-css(top, @checkout-progress-bar-item-element-outer-radius__width); 129                 .lib-css(top, @checkout-progress-bar-item-element-outer-radius__width);
130                 .lib-css(width, @checkout-progress-bar-item-element-inner__width); 130                 .lib-css(width, @checkout-progress-bar-item-element-inner__width);
131                 content: counter(i); 131                 content: counter(i);
132                 counter-increment: i; 132                 counter-increment: i;
133                 .lib-typography( 133                 .lib-typography(
134                 @_color: @checkout-progress-bar-item-element-inner__color, 134                 @_color: @checkout-progress-bar-item-element-inner__color,
135                 @_font-family: false, 135                 @_font-family: false,
136                 @_font-size: @checkout-progress-bar__font-size, 136                 @_font-size: @checkout-progress-bar__font-size,
137                 @_font-style: false, 137                 @_font-style: false,
138                 @_font-weight: @font-weight__semibold, 138                 @_font-weight: @font-weight__semibold,
139                 @_line-height: false 139                 @_line-height: false
140                 ); 140                 );
141             } 141             }
142         } 142         }
143  143 
144         &._complete { 144         &._complete {
145             cursor: pointer; 145             cursor: pointer;
146             &:hover { 146             &:hover {
147                 &:before { 147                 &:before {
148                     .lib-css(background, @checkout-progress-bar-item__hover__background-color); 148                     .lib-css(background, @checkout-progress-bar-item__hover__background-color);
149                 } 149                 }
150                 > span { 150                 > span {
151                     &:before { 151                     &:before {
152                         .lib-css(background, @checkout-progress-bar-item__hover__background-color); 152                         .lib-css(background, @checkout-progress-bar-item__hover__background-color);
153                     } 153                     }
154                 } 154                 }
155             } 155             }
156             > span { 156             > span {
157                 .lib-css(color, @checkout-progress-bar-item__complete__color); 157                 .lib-css(color, @checkout-progress-bar-item__complete__color);
158  158 
159                 &:after { 159                 &:after {
160                     .lib-css(font-family, @icons__font-name); 160                     .lib-css(font-family, @icons__font-name);
161                     .lib-css(content, @checkout-progress-bar-item-element-inner__active__content); 161                     .lib-css(content, @checkout-progress-bar-item-element-inner__active__content);
162                 } 162                 }
163             } 163             }
164         } 164         }
165  165 
166         &._active { 166         &._active {
167             &:before { 167             &:before {
168                 background: @checkout-progress-bar-item__active__background-color; 168                 background: @checkout-progress-bar-item__active__background-color;
169             } 169             }
170             > span { 170             > span {
171                 .lib-css(color, @checkout-progress-bar-item__color); 171                 .lib-css(color, @checkout-progress-bar-item__color);
172                 &:before { 172                 &:before {
173                     .lib-css(background, @checkout-progress-bar-item__active__background-color); 173                     .lib-css(background, @checkout-progress-bar-item__active__background-color);
174                 } 174                 }
175                 &:after { 175                 &:after {
176                     .lib-css(font-family, @icons__font-name); 176                     .lib-css(font-family, @icons__font-name);
177                     .lib-css(content, @checkout-progress-bar-item-element-inner__active__content); 177                     .lib-css(content, @checkout-progress-bar-item-element-inner__active__content);
178                 } 178                 }
179             } 179             }
180         } 180         }
181     } 181     }
182 } 182 }

Araxis Merge (but not the data content of this report) is Copyright © 1993–2019 Araxis Ltd (www.araxis.com). All rights reserved.